<!DOCTYPE html>
<html>
<head>
  <title></title>
  <!--[if lt IE 9]>
  <meta http-equiv="refresh" content="0;ie.html" />
  <![endif]-->

  <link rel="shortcut icon" href="__STATIC__/layout/favicon.ico">
   <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
  <link href="__STATIC__/layout/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
  <link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
  <link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
  <link href="__STATIC__/layout/css/channel.css?v=4.1.0" rel="stylesheet">
  <link href="__STATIC__/layout/css/plugins/iCheck/custom.css" rel="stylesheet">
 
  <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
  <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">

  <!-- Sweet Alert -->
  <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

 <style>
    .modal-body .table tbody tr td{
      border:0;
    }
     .modal-body input.form-control{
      width: 180px;
     }
     .modal-body input.form-control,.modal-body select.form-control{
      height: 26px;
      border-radius: 4px;
     }
    .freelist>li>a{
      color: #333;
    }
    .grey{
      color:#c1cbd5;
    }
    #rightfreelist li a:hover{
      background: #fff;
    }
      #rightfreelist li{
        float: right;
      }
     #rightfreelist li button{
     margin-top:5px;
     width: 70px;
     }
     .table tbody tr td.tdImg{
      padding: 1px;
      width: 70px !important;
      height:60px !important;
      box-sizing: border-box;
     }
     .tdImg img{
      display: inline-block;
      width: 100%;
      height: 100%;
     }
     #beizhuBtn{
      cursor: pointer;
     }
     div.padding-10 .label-info{
      display: inline-block;
      width: 100px;
      height: 28px;
      line-height: 1.76;
     }
     .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio]{
      margin-top: 2px
     }
     .table-bordered > thead > tr > th, .table-bordered > thead > tr > td{
      background: #fff;
     }
     #orderTable > thead > tr > th, #orderTable> thead > tr > td{
      border:0;
     }
     .default-tag{
      color: #ff973c;
      border: 1px solid rgba(255,151,60,.4);
      display: inline-block;
     }
     .incomeAdd-money-lg .danger{
          font-size: 18px;
          color: #f96868;
     }
     .mr40{
      margin-right: 40px!important;
      box-sizing: border-box;
     }
     .mr25{
      margin-right: 40px!important;
      box-sizing: border-box;
     }
     .incomeAdd-money{
      line-height: 40px;
      color: #415161;
      border-bottom: 1px solid #f1f2f7;
     }
 </style>
</head>
<body class="white-bg" style="color:#333;padding:3px;">
 <!-- 标题 -->
    <div class="page-heade">
        <h2 class="title_color text-center">订单详情</h2>
    </div>
    <!-- 标题 -->
<div class="row-margin-top" >
<form role="form" id="form1" class="form-inline" method="get" action="#">
 <div class="padding-10 row" style="position: relative;margin:0">
    <div class="col-sm-12">
       <ul class="nav nav-tabs freelist" role="tablist" style="">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">订单详情</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">出库发货记录</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">收款记录</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">发货签收记录</a></li>
      </ul>
    </div>
    <div class="col-sm-6" style="position: absolute;right: 0;top:5px">
       <ul class="nav nav-pills text-right freelist clearfix" role="tablist" id="rightfreelist">
        <li role="presentation"><button type="button" class="btn btn-primary" style="color: #fff">发货</button></li>
        <li role="presentation" onclick="goback()"><a href="#"><i class="fa fa-reply"></i>&nbsp;退回</a></li>
        <li role="presentation"><a href="#"><i class="fa fa-file-zip-o"></i>&nbsp;导出</a></li>
        <li role="presentation"><a href="#"><i class="fa fa-print"></i>&nbsp;打印</a></li>
      </ul>
    </div>
 </div>

  <!-- Tab panes -->
  <div class="tab-content" style="margin:0 15px 15px">
    <div role="tabpanel" class="tab-pane active animated fadeIn" id="home">
      <div class="padding-10 row">
        <div class="col-sm-8">
          <span class="colorRed" id="orderStatus" style="font-size: 16px;">待发货确认</span>&nbsp;&nbsp;订单号：<span id="orderNum"> DH-O-20180625-323782 </span>&nbsp;&nbsp;客户名称：<span id="customerName">小程序测试账号【二级代理】</span>&nbsp;&nbsp;业务员：<span id="yewuyuan"></span>
        </div>
        <div class="col-sm-4">
          
        </div>
      </div>
      <table class="table table-bordered bud_hei text-center">
        <thead>
            <tr class="info">
              <th>&nbsp;</th>
              <th class="text-center">主图</th>
              <th>商品编码</th>
              <th>商品名称</th>
              <th>商品规格</th>
              <th>数量</th>
              <th>单位</th>
              <th>商品参数</th>
              <th class="text-right">单价</th>
              <th class="text-right">金额小计</th>
              <th class="text-center">备注</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td >1</td>
              <td class="tdImg"><img src="__STATIC__/layout/img/a1.jpg" alt=""></td>
              <td class="text-left">1216705</td>
              <td class="text-left">姚生记</td>
              <td class="text-left">-</td>
              <td class="text-left">2</td>
              <td class="text-left">袋</td>
              <td class="text-left">-</td>
              <td class="text-right">147.20</td>
              <td class="text-right">294.40</td>
              <td>无</td>
            </tr>
            <tr>
              <td >合计</td>
              <td class="tdImg"></td>
              <td class="text-left"></td>
              <td class="text-left"></td>
              <td class="text-left"></td>
              <td class="text-left">2</td>
              <td class="text-left"></td>
              <td class="text-left"></td>
              <td class="text-right"></td>
              <td class="text-right">294.40</td>
              <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
              <td colspan="11" class="text-right" style="height: 60px">
                应付金额：<span class="colorRed" style="font-size: 16px;">294.40</span>
              </td>
            </tr>
        </tfoot>
      </table>
      <div class="padding-10">
        <span class="label label-info">收货信息：</span>&nbsp;&nbsp;<i class="fa fa-pencil-square-o fa-2x" id="modifyinfo" data-toggle="modal" data-target=".modifyinfoDiv"></i>
        客户名称：<span class="">小程序测试账号【二级代理】</span>&nbsp;收货人：咯
        &nbsp;&nbsp;联系方式：13521361234 &nbsp;&nbsp;收货地址：<span>天津市天津市和平区哈哈</span>
        
      </div>
      <div class="padding-10">
        <span class="label label-info">交货日期：</span>&nbsp;
        <input type="text" class="form-control" disabled>
      </div>
      <div class="padding-10">
        <span class="label label-info">制单人：</span>
        &nbsp;&nbsp;

      </div>
      <div class="padding-10">
        <span class="label label-info">备注说明：</span>
        &nbsp;&nbsp;<i class="fa fa-pencil-square-o fa-2x" id="beizhuBtn"></i> <span id="beizhu">无</span>
      </div>
      <div class="padding-10">
        <span class="label label-info">附件信息：</span>
        &nbsp;&nbsp;<i class="fa fa-chain fa-2x" id="beizhuBtn"></i> <span>添加附件</span>(单个附件最大支持20M,支持格式：PDF、Word、Excel、Txt、PNG、JPG、BMP、GIF、RAR、ZIP) <br>
        暂无附件
      </div>
      <div class="padding-10">
        <div class="panel panel-primary">
           <div class="panel-heading">
             <h3 class="panel-title">操作日志</h3>
           </div>
             <div class="panel-body" style="padding: 1px">
                <table class="table bud_hei" style="margin:0">
                    <thead>
                      <tr class="info">
                        <th>公司名称</th>
                        <th>操作人</th>
                        <th>时间</th>
                        <th>操作类别</th>
                        <th>操作日志</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>小程序测试账号</td>
                        <td>朱先生</td>
                        <td>2018-06-25 20:19</td>
                        <td>创建订货单</td>
                        <td>已提交订货单，等待订货单审核</td>
                      </tr>
                      <tr>
                        <td>食品行业体验版@dinghuo123</td>
                        <td>李经理</td>
                        <td>2018-06-25 15:26</td>
                        <td>订货单出库审核</td>
                        <td>订货单已通过出库审核</td>
                      </tr>
                       <tr>
                        <td>食品行业体验版@dinghuo123</td>
                        <td>李经理</td>
                        <td>2018-06-25 15:25</td>
                        <td>订货单财务审核</td>
                        <td>订货单已通过财务审核</td>
                      </tr>
                      <tr>
                        <td>食品行业体验版@dinghuo123</td>
                        <td>李经理</td>
                        <td>2018-06-25 15:25</td>
                        <td>订货单订单审核</td>
                        <td>订货单已通过订货单审核</td>
                      </tr>
                    </tbody>
                </table>
             </div>
        </div>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane animated fadeIn" id="profile">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-info">
      <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title text-right">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <i class="fa fa-angle-down fa-2x"></i>
        </a>
      </h4>
     </div>
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body" style="padding: 0">
        <div style="padding: 10px">
              <div class="form-group">
                       出库仓库：
                  <select name="" id="" class="form-control">
                      <option value="深圳仓库">深圳仓库</option>
                      <option value="广州仓库">广州仓库</option>
                  </select>
                    <label for="" class="checkbox-inline">
                        <input type="checkbox" name="" id="" checked>仅显示库存大于0的商品
                    </label>
                    </div>
                    <div class="form-group text-right" style="float: right;">
                        本次出库数设为0表示此商品暂不出库
                    </div>
        </div>
        <table class="table table-bordered bud_hei" style="margin:0">
            <thead>
                <tr class="font-bold info">
                  <th>&nbsp;</th>
                  <th>主图</th>
                  <th>商品名称</th>
                  <th>商品规格</th>
                  <th>商品编码</th>
                  <th>库存数量（<span id="cankuName">深圳仓库</span>）</th>
                  <th>订购数</th>
                  <th>已出库数</th>
                  <th>本次出库数</th>
                </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td class="tdImg">
                  <img src="__STATIC__/layout/img/a2.jpg" alt="">
                </td>
                <td>姚生记 原味山核桃仁218g/袋</td>
                <td></td>
                <td>1216705</td>
                <td>0袋</td>
                <td>2袋</td>
                <td>0袋</td>
                <td><input type="text" class="form-control" style="width: 60px" value="2">袋</td>
              </tr>
            </tbody>
        </table>
      </div>
      </div>
      </div>
    </div>
  
    </div>
    <div role="tabpanel" class="tab-pane animated fadeIn" id="messages">
        <div class="padding-10">
            <div class="form-group">
              订单号： <span>DH-O-20180626-323782</span><br>
              订单金额：<span class="font-bold">294.40</span>&nbsp;&nbsp;&nbsp;
              待收款：<span class="font-bold">294.40</span>
            </div>
            <div class="form-group" style="float: right;">
                <button class="btn btn-primary" type="button" data-toggle="modal" data-target=".modifyinfoDiv2">添加收款记录</button>
            </div>
        </div>
        <div class="padding-10">
          <table class="table table-bordered bud_hei">
              <thead>
                  <tr class="info">
                    <th>支付流水号</th>
                    <th>新增时间</th>
                    <th>确认时间</th>
                    <th>付款金额</th>
                    <th>支付方式</th>
                    <th>收款账户</th>
                    <th>状态</th>
                    <th>已核销金额</th>
                    <th>未核销金额</th>
                  </tr>
              </thead>
              <tbody>
                <tr>
                  <td colspan="9" class="text-center">暂无数据</td>
                </tr>
              </tbody>
          </table>
        </div>
        <p class="padding-10">退款确认</p>
           <div class="padding-10">
          <table class="table table-bordered bud_hei">
              <thead>
                  <tr class="info">
                    <th class="text-right">退款金额</th>
                    <th>退款原因</th>
                    <th>退款时间</th>
                    <th>状态</th>
                  </tr>
              </thead>
              <tbody>
                <tr>
                  <td colspan="4" class="text-center">暂无数据</td>
                </tr>
              </tbody>
          </table>
        </div>
    </div>
    <div role="tabpanel" class="tab-pane animated fadeIn" id="settings">暂无记录~</div>
  </div>
<div class="footer fixed_full text-center" id="fixBG">
       <button class="btn btn-warning" type="button" onclick="goback()">返回</button>
    </div>
 </form>
</div>

  
<div class="modal fade modifyinfoDiv" tabindex="-1" role="dialog"  aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog modal-lg" role="document" style="width:1200px !important">
    <div class="modal-content">
       <form action="" class="form-inline">
      <div class="modal-body modalBody1">
        <div class="padding-10 row">
           <div class="col-lg-6">
            <label for="">修改收货地址</label>
              <div class="input-group">
                <input type="text" class="form-control" placeholder="请输入收货人姓名或电话">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                </span>
              </div><!-- /input-group -->
              <div class="form-group">
                <button type="button" class="btn btn-info" id="addAddr" id="modifyinfo" data-toggle="modal" data-target=".modifyinfoDiv1"><i class="fa fa-plus fa-2x"></i>新增地址</button>
              </div>
            </div><!-- /.col-lg-6 -->
        </div>
        <div class="padding-10 clearfix">
            <label for="addr1">
                <input type="radio" name="addressInfo" id="addr1" checked="">&nbsp;&nbsp;看看你，咯，13345671234，中国天津市天津市和平区哈哈&nbsp;&nbsp;<span class="default-tag">默认</span>
            </label>
            <div class="form-group" style="float: right;">
                <button class="btn btn-warning modifyinfoBtn" type="button">修改</button>
                <button class="btn btn-danger" type="button">删除</button>
            </div>
        </div>
        <div class="padding-10 clearfix">
            <label for="addr2">
                <input type="radio" name="addressInfo" id="addr2">&nbsp;&nbsp;bjyp,朱先生，18999999999，中国浙江省嘉兴市桐乡市乌镇&nbsp;&nbsp;
            </label>
            <div class="form-group" style="float: right;">
                 <button class="btn btn-info" type="button">设为默认</button>
                <button class="btn btn-warning modifyinfoBtn" type="button">修改</button>
                <button class="btn btn-danger" type="button">删除</button>
            </div>
        </div>
      </div>
       <div class="modal-body modalBody2" style="display: none;">
          <h4 style="font-size:16px">新增地址</h4>
          <div class="row padding-10">
            <div class="col-sm-2 text-right"><span class="colorRed">*</span>客户名称</div>
            <div class="col-sm-4"><input type="text" class="form-control" name=""></div>
            <div class="col-sm-2 text-right">电话</div>
            <div class="col-sm-4"><input type="text" class="form-control" name=""></div>
          </div>
           <div class="row padding-10">
            <div class="col-sm-2 text-right"><span class="colorRed">*</span>收货人</div>
            <div class="col-sm-4"><input type="text" class="form-control" name=""></div>
            <div class="col-sm-2 text-right">手机</div>
            <div class="col-sm-4"><input type="text" class="form-control" name=""></div>
          </div>
           <div class="row padding-10">
            <div class="col-sm-2 text-right"><span class="colorRed">*</span>区域</div>
            <div class="col-sm-4"><input type="text" class="form-control" name=""></div>
            <div class="col-sm-2 text-right"><span class="colorRed">*</span>详细地址</div>
            <div class="col-sm-4"><input type="text" class="form-control" name=""></div>
          </div>
       </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default emptyBtn" style="display: none;">清空</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确认</button>
      </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>
<div class="modal fade modifyinfoDiv1" tabindex="-1" role="dialog"  aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog modal-lg" role="document" style="width:1200px !important">
    <div class="modal-content">
       <form action="" class="form-inline">
       <div class="modal-body modalBody2">
          <h4 style="font-size:16px">新增地址</h4>
          <div class="row padding-10">
            <div class="col-sm-2 text-right"><span class="colorRed">*</span>客户名称</div>
            <div class="col-sm-4"><input type="text" class="form-control" name=""></div>
            <div class="col-sm-2 text-right">电话</div>
            <div class="col-sm-4"><input type="text" class="form-control" name=""></div>
          </div>
           <div class="row padding-10">
            <div class="col-sm-2 text-right"><span class="colorRed">*</span>收货人</div>
            <div class="col-sm-4"><input type="text" class="form-control" name=""></div>
            <div class="col-sm-2 text-right">手机</div>
            <div class="col-sm-4"><input type="text" class="form-control" name=""></div>
          </div>
           <div class="row padding-10">
            <div class="col-sm-2 text-right"><span class="colorRed">*</span>区域</div>
            <div class="col-sm-4"><input type="text" class="form-control" name=""></div>
            <div class="col-sm-2 text-right"><span class="colorRed">*</span>详细地址</div>
            <div class="col-sm-4"><input type="text" class="form-control" name=""></div>
          </div>
       </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default emptyBtn" style="display: none;">清空</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确认</button>
      </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>
<div class="modal fade modifyinfoDiv2" tabindex="-1" role="dialog"  aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog modal-lg" role="document" style="width:1200px !important">
    <div class="modal-content">
       <form action="" class="form-inline">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" style="font-size: 16px;">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">添加收款记录</h4>
      </div>
       <div class="modal-body">
       <div class="incomeAdd-money-lg"><span class="danger mr40"><!-- react-text: 5743 -->待支付：<!-- /react-text --><!-- react-text: 5744 -->294.40<!-- /react-text --></span></div>
        <div class="incomeAdd-money">
          <span class="mr25"><!-- react-text: 5747 -->订单金额：<!-- /react-text --><!-- react-text: 5748 -->294.40<!-- /react-text --></span><span class="mr25"><!-- react-text: 5750 -->已付款：<!-- /react-text --><!-- react-text: 5751 -->0.00<!-- /react-text --></span><span><!-- react-text: 5753 -->待确认：<!-- /react-text --><!-- react-text: 5754 -->0.00<!-- /react-text --></span><span class="cgray">|</span><span>DH-O-20180626-323782</span>
        </div>
        <table class="table" id="orderTable">
            <tr>
              <td class="active text-center" rowspan="2">
                  使用资金<br>账户付款
              </td>
              <td class="text-right"><span class="colorRed">*</span>预付款账户</td>
              <td><input type="text" class="form-control" value="0"></td>
              <td class="text-right"><span class="colorRed">*</span>现金账户</td>
              <td><input type="text" class="form-control" value="0"></td>
            </tr>
            <tr>
              <td class="text-right"><span class="colorRed">*</span>返点账户</td>
              <td colspan="3"><input type="text" class="form-control" value="0"></td>
            </tr>
            <tr>
              <td colspan="5"></td>
            </tr>
            <tr>
                <td rowspan="5" class="active text-center">客户已线下付款</td>
                <td class="text-right"><span class="colorRed">*</span>付款金额</td>
                <td colspan="2"><input type="text" class="form-control" value="294.40"></td>
            </tr>
            <tr>
                <td class="text-right"><span class="colorRed">*</span>付款日期</td>
                <td colspan="3"><input type="text" class="form-control" value=""></td>
            </tr>
            <tr>
                <td class="text-right"><span class="colorRed">*</span>收款方式</td>
                <td colspan="3">
                    <label for="radio-inline">
                      <input type="radio" class="" value="" name="xianjin">现金
                    </label>
                     <label for="radio-inline">
                      <input type="radio" class="" value="" name="bankzhuanzhang">银行转账
                    </label>
                </td>
            </tr>
            <tr>
                <td class="text-right">备注</td>
                <td colspan="3">
                  <textarea name="" id="" class="form-control" style="height:60px;width:180px;user-select:none"></textarea>
                </td>
            </tr>
            <tr>
                <td class="text-right">附件</td>
                <td colspan="3">
                  <i class="fa fa-chain" id="beizhuBtn"></i> <span>添加附件</span><span class="grey vm"> 建议上传订单付款凭证，如汇款单等；附件支持JPG\PNG\Word\Excel\Txt格式，大小不超过4M</span> <br>
                </td>
            </tr>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确认</button>
      </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>
  <script src="__STATIC__/layout/js/jquery.min.js"></script>
  <script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>
  <script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
  <!-- layer javascript -->
  <script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>
  <!-- <script src="__STATIC__/layout/js/plugins/layer/laydate/laydate.js"></script> -->
    <!-- Peity -->
  <!-- <script src="__STATIC__/layout/js/demo/bootstrap-table-demo.js"></script> -->
   <script src="__STATIC__/layout/js/common.js"></script>
</body>
</html>
<script>
  

     // //日期范围限制
     //    var start = {
     //        elem: '#start',
     //        format: 'YYYY/MM/DD',
     //        min: laydate.now(), //设定最小日期为当前日期
     //        max: '2099-06-16 23:59:59', //最大日期
     //        istime: true,
     //        istoday: false,
     //        choose: function (datas) {
     //            end.min = datas; //开始日选好后，重置结束日的最小日期
     //            end.start = datas //将结束日的初始值设定为开始日
     //        }
     //    };
     //    var end = {
     //        elem: '#end',
     //        format: 'YYYY/MM/DD',
     //        min: laydate.now(),
     //        max: '2099-06-16 23:59:59',
     //        istime: true,
     //        istoday: false,
     //        choose: function (datas) {
     //            start.max = datas; //结束日选好后，重置开始日的最大日期
     //        }
     //    };
     //    laydate(start);
     //    laydate(end);

     /*请输入关键字或空格查询*/
     function goback(){
      history.go(-1)
     }

     /*新增地址*/
     // $("#addAddr").click(function(){
     //    $(this).parents('.modalBody1').hide().siblings('.modalBody2').show();
     //    $(".emptyBtn").show();
     // })
</script>